import Layout from '../../components/Layout';
import { Box, Heading, Text, Button, Divider } from '@chakra-ui/react';
import { css } from '@emotion/core'

const DetailContainer = css`
  padding: 10px 0;
  & > p {
    font-size: 14px;
    margin-bottom: 10px;
  }
  & > img {
    margin-bottom: 10px;
    display: block;
  }
`

export default function Detail () {
  return (
    <Layout>
      <Box maxW="1200px" mx="auto" mt="70px">
        <Heading as="h2" size="xl">fadsdasdsdasd</Heading>
        <Heading as="h4" size="lg" mt="10px" color="gray.500" fontWeight="light">
          adsfasdfsdsd
        </Heading>
        <Divider mt="10px" />
        <Box overflow="hidden" mt="10px">
          <Text float="left">作者: Tomas</Text>
          <Text float="right">发布时间:2045-05-05</Text>
        </Box>
        <Divider mt="10px" />
        <Box css={DetailContainer}>
          <p>
            adsfasdfsdsdadsfasdfsdsdadsfasdfsdsdadsfasdfsdsdadsfasdfsdsd
          </p>
        </Box>
      </Box>
    </Layout>
  )
}